<template>
    <div class="todo-wrap">
    
    
    
        <div class="todo-header">
    
    
    
            <input type="text" placeholder="请输入新的任务名称，按回车键确认" 
            v-model="newTask"
            @keyup.enter="addNewTask"
            
            
            />

        </div>
    </div>
</template>
<script>
  import {nanoid} from 'nanoid' 
  export default{
    name:'TopContent',
    data() {
        return {
            
            newTask:''
        }
    },
    props:['addTask'],
    methods:{
        addNewTask(){
            if(this.newTask.trim()===''){
                alert('输入不合法，请重新输入!')
                this.newTask=''
                return;
            }
            let newTaskobj={id:nanoid(),name:this.newTask,status:false};// eslint-disable-line no-unused-vars
            this.addTask(newTaskobj);
            this.newTask='';
        }
    }

  }
</script>
<style scoped>
.todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
}

.todo-header input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>